

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新增优惠券</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/public/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/public/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div style="height: 42px;line-height: 42px;padding: 0 15px;border-bottom: 1px solid #f6f6f6;color: #333;border-radius: 2px 2px 0 0;font-size: 14px;">
            <span><i id="return" class="layui-icon layui-icon-return" style="padding-right: 10px;"></i></span>
            <span>新增优惠券</span>
        </div>

        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="component-form-group" style="height: 100%">

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>优惠券名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" style="width: 300px" lay-verify="required" autocomplete="off" placeholder="请输入优惠券名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>发放总量</label>
                    <div class="layui-input-block">
                        <input type="text" name="totalCount" style="width: 300px" lay-verify="checkTotalCount" autocomplete="off" placeholder="最多100000张" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label"><span style="color: red">*</span>优惠券类型</div>

                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <input  type="radio" lay-filter="typeRadio"  name="type" value="1"  checked title="现金券">
                        </div>
                        <div class="layui-inline">
                            <input type="text" name="val" id="val" lay-verify="val" autocomplete="off" placeholder="请输入现金值,单位元" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <input type="radio" lay-filter="typeRadio" name="type" value="0"  title="免费券">
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-form-label"><span style="color: red">*</span>使用场景</div>
                    <div class="layui-input-block">
                        <input type="radio" name="use" lay-filter="use" value="0" title="自用" checked>
                        <input type="radio" name="use" lay-filter="use" value="1"  title="赠送">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-form-label"><span style="color: red">*</span>派发方式</div>
                    <div class="layui-input-block">
                        <input type="radio" name="dispatchType" lay-filter="dispatchType" value="0" title="公开链接">
                        <input type="radio" name="dispatchType" lay-filter="dispatchType" checked value="1" title="隐藏链接">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-form-label" style="width: 90px;"><span style="color: red">*</span>每人限领次数</div>

                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <input  type="radio" lay-filter="limitRadio" id="unlimited" name="limit" value="0" checked title="不限次数">
                        </div>
                    </div>
                    <div class="layui-form-label" style="width: 90px;"></div>
                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <input type="radio" lay-filter="limitRadio" id="limited"  name="limit"  value="1"  title="限领">
                        </div>
                        <div class="layui-inline">
                            <input type="text" name="limitCount" id="limitCount" disabled="disabled" lay-verify="checkLimitCount" autocomplete="off" placeholder="请输入次数" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            次<span style="padding-left:20px;color: red">限制在1~100之间的整数</span>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-form-label"><span style="color: red">*</span>用券时间</div>

                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <input  type="radio" lay-filter="validTypeRadio"  name="validType" value="0"  checked title="">
                        </div>
                        <div class="layui-inline" ><input type="text" name="startTime" id="startTime"  placeholder="开始时间" autocomplete="off" class="layui-input"></div>
                        <div class="layui-inline" >——</div>
                        <div class="layui-inline" ><input type="text" name="endTime" id="endTime"  placeholder="结束时间" autocomplete="off" class="layui-input"></div>

                    </div>
                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <input type="radio" lay-filter="validTypeRadio" name="validType" value="1"  title="领券当日起">
                        </div>
                        <div class="layui-inline">
                            <input type="text" name="validDay" disabled="disabled" id="validDay" lay-verify="validDay" autocomplete="off" placeholder="请输入天数" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            天内可用
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/public/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/public/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate','layer','element','layedit'], function(){
        var $ = layui.$
                ,admin = layui.admin
                ,element = layui.element
                ,layer = layui.layer
                ,laydate = layui.laydate
                ,form = layui.form;

        $(document).on('click','#return',function(){
            window.location.href = "/coupon/list";
        });

        var startTime= laydate.render({
            elem: '#startTime'
            ,type: 'datetime'
            ,format:'yyyy-MM-dd HH:mm:ss'
            ,done:function(value){
                var curDate = new Date().getTime()-3000;//当前时间推前3秒，避免不能选择时间组件的现在button
                var choseDate = new Date(value).getTime();
                if(choseDate<curDate){
                    layer.msg('开始时间不能在当前时间之前',{time:'2000'},function () {
                        $("#startTime").val("");
                    });
                    return false;
                }
            }
        });
        var endTime= laydate.render({
            elem: '#endTime'
            ,type: 'datetime'
            ,format:'yyyy-MM-dd HH:mm:ss'
            ,done:function(value){
                var startDate = new Date($("#endTime").val()).getTime();
                var choseDate = new Date(value).getTime();
                if(choseDate<startDate){
                    layer.msg('结束时间不能在开始时间之前',{time:'2000'},function () {
                        $("#endTime").val("");
                    });
                    return false;
                }
            }
        });

        form.on("radio(typeRadio)",function (data) {
            var type=data.value;
            if(type==1) {
                $("#val").removeAttr("disabled").removeClass("layui-btn-disabled");
            }else{
                $("#val").val("").attr("disabled","disabled").addClass("layui-btn-disabled");
            }
        });

        // 公开链接只能选择限领(0公开链接，1隐藏链接)
        form.on("radio(dispatchType)",function (data) {
            var dispatchType=data.value;
            if(dispatchType==0) {
                $("#unlimited").val("").attr("disabled","disabled").addClass("layui-btn-disabled");
                $("#limited").prop("checked", "checked");
                $("#limitCount").removeAttr("disabled").removeClass("layui-btn-disabled");
                form.render();
            } else{
                $("#unlimited").removeAttr("disabled").removeClass("layui-btn-disabled").prop("checked", "checked");
                $("#limitCount").val("").attr("disabled","disabled").addClass("layui-btn-disabled");
                form.render();
            }
        });

        form.on("radio(limitRadio)",function (data) {
            var limit=data.value;
            if(limit==1) {
                $("#limitCount").removeAttr("disabled").removeClass("layui-btn-disabled");
            }else{
                $("#limitCount").val("").attr("disabled","disabled").addClass("layui-btn-disabled");
            }
        });

        form.on("radio(validTypeRadio)",function (data) {
            var validType=data.value;
            if(validType==1) {
                $("#validDay").removeAttr("disabled").removeClass("layui-btn-disabled");
                $("#startTime").val("").attr("disabled","disabled").addClass("layui-btn-disabled");
                $("#endTime").val("").attr("disabled","disabled").addClass("layui-btn-disabled");

            }else{
                $("#validDay").val("").attr("disabled","disabled").addClass("layui-btn-disabled");
                $("#startTime").removeAttr("disabled").removeClass("layui-btn-disabled");
                $("#endTime").removeAttr("disabled").removeClass("layui-btn-disabled");
            }
        });

        /* 自定义验证规则 */
        form.verify({
            checkTotalCount:function (value) {
                if(!/^\d{1,5}$|^100000$/.test(value)){
                    return '最多发100000张';
                }
            }
            ,checkLimitCount:function (value) {
                if($("#limit").val==1) {
                    if (!/^\d{1,2}$|^100$/.test(value)) {
                        return '限领1到100之间的整数';
                    }
                }
            }
        });

        /* 监听提交 */
        form.on('submit(component-form-demo1)', function(data){
            var data=data.field;
            if(data.type==1){
                if(data.val==null || data.val==0){
                    layer.msg("请输入现金值");
                    return  false;
                }
            }
            if(data.limit==1) {
                if (!/^\d{1,2}$|^100$/.test(data.limitCount)) {
                    layer.msg("限领1到100之间的整数");
                    return  false;
                }
            }
            $.post("/coupon/saveCoupon", data, function (result) {
                if (result.code > 0) {
                    layer.msg(result.msg);
                } else {
                    window.location.href = "/coupon/list";
                }
            });
            return false;

        });
    });

</script>
</body>
</html>
